<template>
    <div class="register-wrapper padding-12">

        <div class="register-body">
            <div class="register-form-wrap">
                <van-cell-group :border="false">
                    <van-field
                            v-model="userPhone"
                            type="tel"
                            label="+86"
                            placeholder="手机号码"
                            maxlength="11"
                            :error="phoneError"
                            :error-message="phoneErrorMsg"
                            @blur="phoneBlur"
                    />
                    <van-field
                            v-model="sms"
                            center
                            placeholder="验证码"
                            :error="smsError"
                            @blur="smsBlur"
                    >
                        <van-button slot="button" size="small" type="info" round @click="sendSms" :disabled="smsDisabled">{{smsTxt}}</van-button>
                    </van-field>
                    <van-field
                        v-model="password"
                        :type="passwordType"
                        placeholder="密码"
                        :error="passwordError"
                        :error-message="passwordErrorMsg"
                        @blur="passwordBlur"
                    >
                        <template slot="right-icon">
                            <div class="close-password-icon" @click="changePasswordType" v-if="isShowPassword">
                              <img src="/static/images/close-password-icon.png">
                            </div>
                            <div class="see-password-icon" @click="changePasswordType" v-if="!isShowPassword">
                              <img src="/static/images/see-password-icon.png">
                            </div>
                        </template>
                    </van-field>
                    <van-cell></van-cell>
                </van-cell-group>
                <div class="register-btn">
                    <van-button size="large" round class="register-submit-btn" @click="submit">注册</van-button>
                </div>
                <div class="checkbox-div">
                  注册表示您已同意<router-link to="/agreement" class="mime-agreement-font">用户协议及隐私政策</router-link>
                </div>
            </div>
        </div>
        <div class="register-footer">
            <van-row type="flex" justify="space-between">
                <van-col span="3" class="register-foot-line"></van-col>
                <van-col span="18" class="text-align-c">
                    <router-link to="/login">已有账号,<span style="color: #0085ca">立即登录</span></router-link>
                </van-col>
                <van-col span="3" class="register-foot-line"></van-col>
            </van-row>
        </div>
    </div>
</template>
<script>
  import Cookie from 'js-cookie'
  import ajax from '../../module/ajax/public'
  import { getInfo } from '../../module/ajax/getUserInfo'
  import { Field, Icon, Button, Checkbox, Cell, CellGroup, Row, Col, Notify } from 'vant'
  export default {
    name: 'Register',
    components: {
      [Field.name]: Field,
      [Icon.name]: Icon,
      [Button.name]: Button,
      [Checkbox.name]: Checkbox,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Row.name]: Row,
      [Col.name]: Col
    },
    data () {
      return {
        userPhone: '',
        phoneError: false,
        phoneErrorMsg: '',
        sms: '',
        smsError: false,
        smsDisabled: false,
        smsTxt: '获取验证码',
        password: '',
        passwordError: false,
        passwordErrorMsg: '',
        isShowPassword:true,
        passwordType:'password'
      }
    },
    created () {
      let inventId = this.$route.query.invent_id
      if (inventId) {
        Cookie.set('inventId', inventId)
      }
    },
    methods: {
      // 手机号验证
      phoneBlur () {
        if (this.userPhone !== '') {
          if (!(/^1[3456789]\d{9}$/.test(this.userPhone))) {
            this.phoneErrorMsg = '手机号格式错误'
            this.phoneError = true
            return false
          } else {
            this.phoneErrorMsg = ''
            this.phoneError = false
            return true
          }
        } else {
          this.phoneErrorMsg = ''
          this.phoneError = true
          return false
        }
      },
      // 发送验证码
      sendSms () {
        if (!this.phoneBlur()) {
          return
        }
        ajax.doAction({
          url: '/sms',
          type: 'POST',
          items: {
            phone: this.userPhone
          },
          successCallback: (data) => {
            // console.log(data)
            if (data.code !== 200) {
              Notify({
                message: data.msg,
                duration: 1000
              })
              return
            }

            Notify({
              message: data.msg,
              duration: 1000,
              background: '#0085ca'
            })
            let time = null
            let count = 60
            this.smsDisabled = true
            time = setInterval(() => {
              count--
              this.smsTxt = `${count}s后重新获取`
              if (count <= 0) {
                clearInterval(time)
                count = 60
                this.smsDisabled = false
                this.smsTxt = '获取验证码'
              }
            }, 1000)
          },
          errorCallback: (data) => {
            console.log('请求失败')
          }
        })
      },
      // 验证码验证
      smsBlur () {
        if (this.sms !== '') {
          this.smsError = false
          return true
        } else {
          this.smsError = true
          return false
        }
      },
      // 密码验证
      passwordBlur () {
        if (this.password !== '') {
          if (!(/^(\w){3,20}$/.test(this.password))) {
            this.passwordErrorMsg = '密码格式错误'
            this.passwordError = true
            return false
          } else {
            this.passwordErrorMsg = ''
            this.passwordError = false
            return true
          }
        } else {
          this.passwordErrorMsg = ''
          this.passwordError = true
          return false
        }
      },
      changePasswordType(){
        this.isShowPassword = !this.isShowPassword
        if(this.isShowPassword){
          this.passwordType = 'password'
        }else{
          this.passwordType = 'text'
        }
      },
      // 提交
      submit () {
        if (!this.phoneBlur()) {
          return
        }
        if (!this.smsBlur()) {
          return
        }
        if (!this.passwordBlur()) {
          return
        }

        const userInfo = Cookie.get('userInfo')
        const user = JSON.parse(userInfo || '{}')
        let items = {
          username: this.userPhone,
          password: this.password,
          code: this.sms,
          avatar: user.avatar,
          openid: user.openid,
          gender: user.gender,
          nickname: user.nickname
        }

        let inventId = Cookie.get('inventId')
        if (inventId) {
          items.inventId = inventId
        }
        ajax.doAction({
          url: '/register',
          type: 'POST',
          items: items,
          successCallback: (data) => {
            // console.log(data)
            if (data.code !== 200) {
              Notify({
                message: data.msg,
                duration: 1000
              })
              return
            }

            Notify({
              message: data.msg,
              duration: 1000,
              background: '#0085ca'
            })
            Cookie.set('token', data.data.access_token, {expires: this.GLOBAL.CookieExpired})
            getInfo()
            setTimeout(() => {
              this.$router.push('/')
            }, 1000)
          },
          errorCallback: (data) => {
//            console.log(data)
          }
        })
      }
    }
  }
</script>
<style>
.register-wrapper .van-checkbox__label{
  font-size: 12px;
  color: #0085ca;
}
.register-wrapper .van-checkbox__icon{
  height: 14px;
  width: 14px;
  border-radius: 3px;
  overflow: hidden;
  line-height: 14px;
}
.van-checkbox__icon .van-icon{
  width:14px;
  height: 14px;
  border: 1px solid #0085ca;
}
.register-wrapper .checkbox-div{
  padding-top: 10px;
  padding-left: 12px;
}

</style>
